<template>
  <div :class="{ 'has-logo': showLogo }" :style="{backgroundColor: sideBackgound}" >
    <logo v-if="showLogo" :collapse="isCollapse"/>
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper" >
      <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :background-color="sideBackgound"
          :text-color="sideTheme === 'theme-dark' ? styles.menuColor : styles.menuLightColor"
          :unique-opened="true"
          :active-text-color="theme"
          :collapse-transition="false"
          mode="vertical">
        <sidebar-item
            v-for="(menu) in menus"
            :key="menu.path"
            :item="menu"/>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import Logo from '@/views/layouts/Sidebar/Logo.vue'
import SidebarItem from '@/views/layouts/Sidebar/SidebarItem.vue'
import styles from '@/assets/styles/variables.module.scss'
import {useRoute} from "vue-router";
import {useStore} from "@/stores";

interface Props {
  name: string,
  title?: string | undefined,
  menus: MenuType[],
  showBottom?: boolean,
}

withDefaults(defineProps<Props>(), {
  title: undefined,
  user: undefined,
});

const route = useRoute();
const store = useStore()

const showLogo = computed(() => store.settings.sidebarLogo);
const sideTheme = computed(() => store.settings.sideTheme);
const theme = computed(() => store.settings.theme || '#409EFF');
const isCollapse = computed(() => !store.sidebar.opened);

const sideBackgound = computed(() => {
  return sideTheme.value === 'theme-dark' ? styles.menuBackground : styles.menuLightBackground;
})

const activeMenu = computed(() => {
  const {meta, path} = route;

  if (meta.activeMenu) {
    return meta.activeMenu;
  } else if (meta.varPath) {
    return meta.varPath;
  } else {
    return path;
  }
})

</script>

<style scoped>
.menuClass:not(.el-menu--collapse) {
  min-width: 200px;
  align-self: flex-start;
}
</style>
